<template>
  <div class="homeContain">
    <div class="homeTopBar">
      <div class="avatar">
        <img :src="userInfo.avatar">
      </div>
      <div class="userinfo">
        <div>
          <div>{{ userInfo.fullName + ',' + getHelloWord() }}</div>
          <div>{{ parseTime2(new Date()) }}</div>
        </div>
      </div>
      <div class="time-display">
        <div>{{ time }}</div>
      </div>
    </div>
    <div class="homeMessage">
      <el-carousel :interval="5000" arrow="always">
        <el-carousel-item v-for="(item, index) in AnnouncementList" :key="index">
          <img :src="item.cover" class="carousel-item" style="width: 100%"/>

          <div class="carousel-title" style="background-color: rgba(255,238,238,0.09)" @click="goto('SystemNotice')">{{
              item.title
            }}

          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="homePetCards">
      <div class="petCard"
           v-for="item in petList"
           :key="item.petId"
           @mouseenter="hoverCard = item.petId"
           @mouseleave="hoverCard = null">
        <div class="card-inner" :class="{ flipped: hoverCard === item.petId }">
          <!-- 正面：图片 -->
          <div class="card-front">
            <img :src="item.mainImg"/>
          </div>
          <!-- 背面：详细信息 -->
          <div class="card-back">
            <dl class="pet-info">
              <dt>姓名：{{ item.petName }}</dt>
              <dt>种类：{{ item.specis }}</dt>
              <dt>体重：{{ item.weight }}kg</dt>
              <dt>尺寸：{{ item.size }}</dt>
              <dt>性别：{{ item.gender === 1 ? '母' : '公' }}</dt>
            </dl>
          </div>
        </div>
      </div>
    </div>
    快捷功能
    <div class="homeShortcuts">
      <div class="shortcutSon" @click="goto('Vaccination')">添加疫苗接种记录</div>
      <div class="shortcutSon" @click="goto('PhysicalRecord')">添加体检记录</div>
      <div class="shortcutSon" @click="goto('DiseaseWarning')">健康预警</div>
      <div class="shortcutSon" @click="goto('HealthReports')">健康报告</div>
    </div>
  </div>
</template>
<script>
import {parseTime, parseTime2} from "../utils/timeUtil";
import {getAnnouncementList, getUserInfo} from "@/api/user";
import {getPetListAPI} from "@/api/petApi";
import {goto} from "@/utils/pathUtil";


export default {
  name: "home",
  methods: {
    goto,
    parseTime2,
    getPetList() {
      getPetListAPI().then(res => {
        this.petList = res.data
      })
    },
    getHelloWord() {
      const hour = new Date().getHours();
      if (hour >= 0 && hour < 5) {
        return "夜深了";
      } else if (hour >= 5 && hour < 9) {
        return "早上好";
      } else if (hour >= 9 && hour < 12) {
        return "上午好";
      } else if (hour >= 12 && hour < 14) {
        return "中午好";
      } else if (hour >= 14 && hour < 18) {
        return "下午好";
      } else if (hour >= 18 && hour < 22) {
        return "晚上好";
      } else {
        return "晚安";
      }
    },
    updateTime() {
      this.time = parseTime(new Date())
    },
    getAnnouncements() {
      getAnnouncementList({pageSize: 10000, pageNum: 1}).then(res => {
        this.AnnouncementList = res.data.list
      })
    }
  },
  data() {
    return {
      hoverCard: null, // 存储当前悬停的卡片 ID
      petList: [],
      AnnouncementList: [],
      userInfo: {},
      time: ''
    }
  }, mounted() {
    this.getPetList()
    this.getAnnouncements()
    getUserInfo().then(res => {
      this.userInfo = res.data
    })
    this.updateTime(); // 初始化时间
    this.timer = setInterval(this.updateTime, 1000); // 每秒更新

  }, beforeDestroy() {
    clearInterval(this.timer); // 组件销毁时清除定时器
  }
}
</script>
<style scoped>
/* For demo */
.ant-carousel >>> .slick-slide {
  text-align: center;
  height: 160px;
  line-height: 160px;
  background: #364d79;
  overflow: hidden;
}

.ant-carousel >>> .slick-slide h3 {
  color: #fff;
}

/* 页面背景 */
.homeContain {
  background: linear-gradient(to bottom right, #f0f4f8, #d9e2ec);
  min-height: 100vh;
  padding: 20px;
}

/* 顶部栏 */
.homeTopBar {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 左右对称布局 */
  background: #ffffff; /* 纯白背景 */
  padding: 12px 20px;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03); /* 轻微阴影 */
  transition: box-shadow 0.3s ease; /* 阴影过渡动画 */
}

.homeTopBar:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); /* 悬停时阴影加深 */
}

/* 头像 */
.avatar img {
  border-radius: 50%;
  height: 50px;
  width: 50px;
  border: 2px solid #e0e0e0; /* 浅灰边框 */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* 平滑动画 */
}

.avatar img:hover {
  transform: scale(1.1); /* 悬停时放大 */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* 悬停时阴影 */
}

/* 用户信息 */
.userinfo {
  font-size: 15px;
  color: #2d3748; /* 深灰文字 */
  margin-left: 15px; /* 与头像间距 */
}

.userinfo div {
  line-height: 1.5; /* 行距调整 */
}

/* 时间显示 */
.time-display {
  font-size: 15px;
  color: #2d3748; /* 深灰文字 */
  padding: 5px 10px;
  border-radius: 5px;
  transition: background-color 0.3s ease; /* 背景色过渡动画 */
}

.time-display:hover {
  background-color: #f0f4f8; /* 悬停时背景变浅灰 */
}

/* 轮播图 */
.homeMessage {
  margin-top: 20px;
}

.carousel-item {
  position: relative;
  height: 350px;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.carousel-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.carousel-title {
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 12px 24px;
  border-radius: 6px;
  font-size: 20px;
  font-weight: 600;
  animation: fadeIn 1s ease-in-out;
  position: absolute; /* 确保绝对定位 */
  bottom: 10px; /* 调整位置 */
  left: 10px; /* 调整位置 */
  z-index: 5; /* 确保在图片上方 */
  cursor: pointer;
}



.carousel-item:hover .view-details {
  opacity: 1;
}

/* 渐变文字动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 宠物卡片容器 */
.homePetCards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  padding: 20px 0;
}

/* 单个卡片 */
.petCard {
  height: 220px;
  perspective: 1000px;
  transition: transform 0.3s ease;
  cursor: pointer; /* 提示可交互 */
}

.petCard:hover {
  transform: scale(1.05); /* 悬停时轻微放大 */
}

/* 卡片翻转容器 */
.card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.5s ease-in-out; /* 平滑翻转 */
}

.card-inner.flipped {
  transform: rotateY(180deg);
}

/* 卡片正反面通用样式 */
.card-front,
.card-back {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03); /* 轻微阴影 */
}

/* 正面图片 */
.card-front img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 图片适应容器 */
  border-radius: 10px;
}

/* 背面样式 */
.card-back {
  transform: rotateY(180deg);
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f9f9f9; /* 浅灰白背景，温馨感 */
  padding: 15px;
}

/* 宠物信息列表 */
.pet-info {
  width: 100%;
  font-family: Arial, Helvetica, sans-serif; /* 清晰字体 */
  font-size: 14px;
  color: #4a4a4a; /* 深灰文字，易读 */
  line-height: 1.5; /* 增加行距 */
  padding: 10px;
}

.pet-info dt {
  font-weight: 600; /* 标题加粗 */
  color: #6c63ff; /* 柔和紫色，突出标题 */
  margin-top: 5px; /* 标题间距 */
}

.pet-info dd {
  margin-left: 0;
  padding-left: 10px;
  border-left: 2px solid #e0e0e0; /* 浅灰边框，增加层次 */
}

/* 响应式设计 */
@media (max-width: 600px) {
  .homePetCards {
    grid-template-columns: repeat(auto-fit, minmax(100%, 1fr)); /* 小屏幕占满宽度 */
  }

  .petCard {
    height: 300px; /* 增加高度以适应更多内容 */
  }
}

/* 快捷方式按钮 */
.homeShortcuts {
  display: flex;
  gap: 15px;
  margin-top: 5px;
}

.shortcutSon {
  flex: 1;
  height: 80px;
  background: linear-gradient(135deg, #6a82fb, #beaaff);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.shortcutSon:hover {
  background: linear-gradient(135deg, #fc5c7d, #6a82fb);
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
</style>